<template>
	<view class="page">
		<!-- <image class="banner" :src="ossUrlImg +'74bca2501b6338b399acee45fa935b44.png'" mode="widthFix" /> -->

		<u-swiper :list="bannerList" height="440" bgColor="" :autoplay="true"></u-swiper>

		<view class="section">
			<view class="flex-col section_2">
				<view class="flex-col justify-start items-center relative section_3">
					<block v-if="end_time==0">
						<!-- <image src="/static/new/daojishi.png" mode="widthFix" class="djs" style="visibility: hidden;"/> -->
						<!-- <image src="/static/new/btn_zl.png" mode="aspectFit" class="zhulibtn" /> -->
						<text class="endtxt">已结束</text>
					</block>
					<block v-else>
						<image src="/static/new/daojishi.png" mode="widthFix" class="djs" />
						<countdown class="countdown" fontColor='#FF4A3B' :marginW="'0 0 0 6rpx'" :padding="'8rpx 0'"
							:bgcolor="'#ffffff'" :titcolor="'#ffffff'" :fontsize="'24rpx'" :endTime="end_time * 1000"
							@finshTime="finshTime"></countdown>
						<!-- <view class="zisebtn">已助力</view> -->
						<!-- <button open-type="share" class="button-style" style="background-color: transparent;">
						<image src="/static/new/btn_zl.png" mode="aspectFit" class="zhulibtn" />
						</button> -->
					</block>
				</view>
				<!-- 统计 -->
				<view class="tongji">
					<image src="/static/new/total_bg.png" mode="widthFix" class="tongji-bg"></image>
					<view class="tongji-body">
						<view class="tongji-item">
							<text>{{actTotal.participate}}人报名参加</text>
						</view>
						<view class="tongji-item">
							<text>浏览量{{actTotal.browse}}</text>
						</view>
						<view class="tongji-item">
							<text>已有{{actTotal.receive}}人领取</text>
						</view>
					</view>
				</view>
				<!-- 助力好友 -->
				<view class="flex-col section_8 no-mar-t">
					<view class="modtitle mar-t">
						<text class="name">助力好友</text>
					</view>
					<!-- 奖品列表 -->
					<view class="giftlist">
						<view class="gift-item">
							<view class="content">
								<view class="content-body">
									<view class="scroll_lists" v-if="friends && friends.length!=0">
										<view :class="{ scroll_top: animate == true }">
											<view class="scroll_list" v-for="(val, key) in friends" :key="key">
												<image
													:src="val.headimgurl?ossUrl + val.headimgurl:'/static/new/zanwutx.png'"
													mode="aspectFit" class="touxiang" />
												<text class="name">{{val.nickname }}</text>
												<text class="tel">{{val.tel}}</text>
											</view>
										</view>
									</view>
									<u-empty mode="order" text="助力好友为空" v-else></u-empty>

									<!-- <view class="zl-list">
										<view class="friendlist" v-if="friends && friends.length!=0">
											<swiper style="height: 420rpx;" interval="1000" autoplay vertical
												:display-multiple-items="item_lengh">
												<swiper-item v-for="(val, key) in friends" :key="key">
													<view class="friendlist-item">
														<image :src="ossUrl + val.headimgurl" mode="aspectFit" class="img" />
														<text class="name">{{val.nickname }}</text>
														<text class="tel">{{val.tel}}</text>
													</view>
												</swiper-item>
											</swiper>
										</view>
										<view class="friendlist" v-else>
											<u-empty mode="order" text="助力好友为空"></u-empty>
										</view>
									</view> -->
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 我的奖励 -->
				<view class="flex-col section_8">
					<view class="modtitle">
						<text class="name">我的奖励</text>
					</view>
					<!-- 奖品列表 -->
					<view class="giftlist">
						<view class="gift-item" v-for="(item, index) in scheduleList" :key="item.id">
							<view class="title">
								<view class="title-icon"></view>
								<view class="title-body">
									<text class="name">奖品{{item.noun}}：{{item.title}}</text>
									<text class="subname">{{item.subtitle}}</text>
								</view>
							</view>
							<view class="content">
								<image :src="ossUrl + item.tempimg" mode="aspectFill" class="img" />
							</view>
							<view class="jindu">
								<!-- <image src="/static/new/jindu_tip.png" mode="aspectFit" class="tip" /> -->
								<view class="jindu-body">
									<view class="jd1">
										<view class="baifenbi" :style="{width: pace[index]+'%'}"></view>
									</view>
									<view class="jd2">
										<image src="/static/new/jindu_circle.png" mode="aspectFit" class="pos"
											:style="{left: pace[index]+'%'}" />
										<text class="val" :style="{left: pace[index]+'%'}">{{pace[index]}}%</text>
									</view>
								</view>
								<!-- <view class="tip">未领取</view> -->
								<view class="status">
									<button
										v-if="(index < uschedule)||(xlq1==1 && item.noun==1)||(xlq1==1 && item.noun==2)||(xlq1==1 && item.noun==3)"
										style="background-color:#fdd884;">已领取</button>

									<button v-else-if="index >= invite" style="background-color:#F93648;">未达成</button>

									<button v-else @click="receive(item.store_id,item.noun)"
										style="background-color:#F93648;">领取</button>

								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="flex-col section_8">
					<view class="modtitle">
						<text class="name">服务项目</text>
					</view>
					<!-- 奖品列表 -->
					<view class="giftlist">
						<view class="gift-item" v-for="(item, itemindex) in itemList" :key="itemindex"
							@click="onJump('itemdetail?id='+item.id)">
							<view class="content">
								<image :src="item.tempimg" mode="aspectFill" class="img" />
							</view>
							<view class="title">
								<view class="title-body title-body-item">
									<text class="name">{{item.title}}</text>
									<text
										class="subname">{{(item.desc && item.desc.length)>50?item.desc.substring(0,50)+'...':item.desc}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="backhome" @click="onSwitchTab('/pages/index/index')">
			<image src="/static/new/nav_home.png" mode="aspectFit"></image>
		</view> -->

		<!-- 导航菜单 -->
		<view class="tabbar-hei"></view>
		<view class="tabbar">

			<view class="tabbar-item" @click="onJump('/pages/groupbuy/groupbuy')">
				<image src="/static/new/nav_group.png" class="icon icon-tg" mode="aspectFit"></image>
				<text>团购</text>
			</view>

			<view class="tabbar-item tabbar-item-mid">
				
				<block v-if="end_time==0">
					<button @click="onEnd" class="button-style" style="background-color: transparent;">
						<image src="/static/new/sharezl.png" mode="aspectFit" class="icon" />
					</button>
				</block>
				<block v-else>
					<button open-type="share" class="button-style" style="background-color: transparent;">
						<image src="/static/new/sharezl.png" mode="aspectFit" class="icon" />
					</button>
				</block>
				
			</view>

			<view class="tabbar-item" @click="onSwitchTab('/pages/index/index')">
				<image src="/static/new/nav_home.png" class="icon icon-ylt" mode="aspectFit"></image>
				<text>首页</text>
			</view>

		</view>
	</view>
</template>

<script>
	import base from '@/config/baseUrl';
	import countdown from '@/components/cz-countdown.vue'
	import fTabbar from '@/components/module/f-tabbar/f-tabbar';
	import {
		getAssistanceRate,
		itemList
	} from '@/config/api.js';
	// #ifdef MP-WEIXIN
	import {
		storeBanner,
		myReport,
		myReceive
	} from '@/config/api.js';
	import {
		title
	} from 'process';
	// #endif
	export default {
		components: {
			countdown,
			fTabbar,
		},
		data() {
			return {
				j: '＜',
				baseUrl: base.baseUrl,
				// ossUrl:base.ossUrl + '/storage/applet/share/',
				// ossUrl: 'https://member.miaoyan365.com/storage/applet/share/',
				ossUrl: base.ossUrl,
				ossUrlImg: 'https://member.miaoyan365.com/storage/applet/share/',
				statusBarHeight: 30,
				imgUrl: require('../../static/mp-hp/88.png'),
				scheduleCur: 1,
				item_lengh: 5,
				pace: [],
				scheduleList: [],
				scheduleData: [{
						id: 1,
						title: '开始',
						src: require('../../static/mp-hp/1.png')
					},
					{
						id: 2,
						title: '进度一',
						src: require('../../static/mp-hp/2.png')
					},
					{
						id: 3,
						title: '进度二',
						src: require('../../static/mp-hp/3.png')
					},
					{
						id: 4,
						title: '进度三',
						src: require('../../static/mp-hp/3.png')
					},
				],
				schedule: [],
				id: 0,
				user: [],
				from: [],
				fileList1: [],
				uschedule: 0, //已领取进度
				invite: 0, //邀请的进度
				friends: [], //助力的好友
				share_info: [],
				xlq1: 0, //当前已领取
				xlq2: 0, //当前已领取
				xlq3: 0, //当前已领取
				proportion: 0, //进度比例
				items: [null, null, null, null, null, null, null, null, null],
				items_1: [null, null],
				bannerList: [], //banner
				interval: null,
				// 倒计时
				end_time: 0,
				actTotal: {
					participate: 0, //参与人数
					browse: 0, //浏览量
					receive: 0, //领取				
				},
				itemList: [], //项目列表

				animate: false, //无缝滚动
				timer: null, //无缝滚动
			}
		},
		onLoad(option) {
			this.timer = setInterval(this.scroll, 2000); //无缝滚动
			if (option.id && option.id > 0) {
				this.id = option.id
				// uni.setStorageSync('store_id', this.id);
				// var userInfoOld = uni.getStorageSync('userInfo')
				// var that = this
				// if (userInfoOld) {
				// 	let httpData = {
				// 		store_id: this.id,
				// 	};
				// 	uni.$u.http.post('/user/update', httpData).then(res => {
				// 		let userInfoNew = {
				// 			...userInfoOld,
				// 			store_id: that.id,
				// 		}
				// 		userInfo.store_id = that.id
				// 		that.setUserInfo(userInfoNew)
				// 	});
				// }
			}
			// this.id =6
			const systemInfo = uni.getSystemInfoSync();
			const _this = this;
			if (systemInfo.platform === 'ios') {
				_this.statusBarHeight = 30; // iOS 上状态栏的典型高度  
			} else if (systemInfo.platform === 'android') {
				// 对于 Android，可能需要其他方法来获取状态栏高度   
				_this.statusBarHeight = (systemInfo.statusBarHeight || 24) + 10; // 假设 Android 上状态栏的高度为 24px  
			} else {
				_this.statusBarHeight = (systemInfo.statusBarHeight || 24) + 10; // 假设 Android 上状态栏的高度为 24px  
			}

			wx.showShareMenu({
				withShareTicket: true,
				menus: ["shareAppMessage"]
			})
			this.getStars();
			this.report();
			// 隐藏原生的tabbar
			uni.hideTabBar();
			this.getBanner();
			this.getItem();
		},
		// watch: {
		// 	id(newv, oldv) {
		// 		this.getStars();
		// 		this.report();
		// 		this.getBanner();
		// 		this.getItem();
		// 	}
		// },
		methods: {
			//无缝滚动
			scroll() {
				this.animate = true;
				setTimeout(() => {
					this.friends.push(this.friends[0]);
					this.friends.shift();
					this.animate = false;
				}, 1000);
			},
			finshTime(e) {
				console.log(e)
			},
			onEnd(e) {
				uni.showToast({
					title: '活动已结束',
                	icon: 'none'
				})
			},
			onMini() {
				uni.navigateToMiniProgram({
					appId: 'wx3b62af6988d814f7', // 目标小程序appid
					path: 'pages/index/index',
					extraData: {},
					success(res) {
						uni.showToast({
							title: '跳转成功'
						})
					}
				})
			},
			onJump(url) {
				uni.navigateTo({
					url: url
				})
			},
			onSwitchTab(url) {
				uni.switchTab({
					url: url,
					fail(error) {
						console.log(error);
					}
				})
			},
			getStars() {
				var storeUserInfo = uni.getStorageSync('userInfo')
				if (!storeUserInfo.token) return
				let httpData = {
					store_id: storeUserInfo.store_id
				}

				getAssistanceRate({
					params: httpData
				}).then((res) => {
					console.log(res.pace)
					this.pace = res.pace
				}).catch((err) => {
					console.log(err, 'catch')
				})
			},
			receive(store_id,noun)
			{
				let _this =this;
				let httpData={
					store_id:store_id,
					noun:noun,
				};
				myReceive(httpData).then((res) => {
					
					if(res.code == 0)
					{
						if(noun ==1)
						{
							_this.xlq1 = 1;//当前已领取
						}
						if(noun ==2)
						{
							_this.xlq2 = 1;//当前已领取
						}
						if(noun ==3)
						{
							_this.xlq3 = 1;//当前已领取
						}
					}
					this.$refs.uToast.show({ title:'提示',message:res.message})
				}).catch((err) =>{
					
					
				})
				
			},
			report() {
				let _this = this;
				let httpData = {
					id: _this.id
				};
				myReport(httpData).then((res) => {


					_this.user = res.data.user
					if (_this.id > 0) {
						_this.from = res.data.from.content


						for (var i = 0; i < res.data.from.content.img.length; i++) {
							res.data.from.content.img[i].url = _this.ossUrl + res.data.from.content.img[i].url
						}
						_this.fileList1 = res.data.from.content.img

					}
					_this.scheduleList = res.data.gift
					_this.uschedule = res.data.schedule
					_this.invite = res.data.invite
					_this.friends = res.data.friends
					_this.proportion = res.data.proportion
					_this.share_info = res.data.share
					_this.end_time = res.data.end_time
					_this.actTotal.participate = res.data.participate; //参与人数
					_this.actTotal.browse = res.data.browse; //浏览量
					_this.actTotal.receive = res.data.receive; //领取						
					if (_this.friends.length <= 5) {
						_this.item_lengh = _this.friends.length
					}
				}).catch((err) => {


				})


			},
			onShareAppMessage(res) {
				let _this = this;
				return {
					title: _this.share_info.share_title,
					path: '/pages/share/share?shareId=' + _this.user.id + '&store_id=' + _this.user.store_id,
					imageUrl: _this.ossUrl + _this.share_info.share_img
				}
			},
			//banner
			getBanner() {
				var userInfo = uni.getStorageSync('userInfo')
				this.store_id = userInfo.store_id
				if (this.store_id == 0) return
				let httpData = {
					store_id: this.store_id,
					type: 2,
				}
				storeBanner({
					params: httpData
				}).then((res) => {
					if (res && res.length != 0) {
						this.bannerList = res.map(item => {
							return this.ossUrl + item.tempimg
						});
					}
				}).catch((err) => {
					console.log(err, 'catch')
				})
			},
			//项目列表
			getItem() {
				var userInfo = uni.getStorageSync('userInfo')
				this.store_id = userInfo.store_id
				if (this.store_id == 0) return
				let httpData = {
					store_id: this.store_id, //列表
				}

				itemList({
					params: httpData
				}).then((res) => {
					if (res && res.data && res.data.article.length != 0) {
						this.itemList = res.data.article;
					}
				}).catch((err) => {
					console.log(err, 'catch')
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		padding-bottom: 100rpx;

		.section {
			background-color: #ffffff;

			.section_2 {
				margin: 20rpx 20rpx 0;
				padding: 15rpx;
				background-color: #f60011;
				border-radius: 20rpx;
				position: relative;

				.section_3 {
					padding: 36.08rpx 0 70rpx;
					background-color: rgb(255, 246, 0);
					border-radius: 20rpx;
				}
			}
		}

		.section_8 {
			display: flex;
			background-color: #f2f2f2;
			border-radius: 20rpx;
			padding-bottom: 20rpx;
			overflow: hidden;
			margin-top: 15rpx;

			&.no-mar-t {
				margin-top: -80rpx !important;
			}
		}

		// banner
		.banner {
			width: 100%;
		}

		// 导航菜单
		.tabbar-hei {
			display: flex;
			height: 150rpx;
		}

		// 统计
		.tongji {
			width: 100%;
			position: relative;
			top: -40rpx;
			left: 0;
			display: flex;
			justify-content: center;
			align-items: center;

			.tongji-bg {
				width: 100%;
			}

			.tongji-body {
				position: absolute;
				left: 0;
				top: 20%;
				display: flex;
				width: 100%;
				height: 60%;
				justify-content: center;

				.tongji-item {
					display: flex;
					align-items: center;
					padding: 0 15rpx;
					color: #ffffff;
					font-size: 24rpx;
					text-shadow: 4px 4px 4px rgba(126, 18, 5, 0.4);

					&:nth-child(2) {
						border-left: 1px solid rgba(255, 255, 255, 0.3);
						border-right: 1px solid rgba(255, 255, 255, 0.3);
					}
				}
			}
		}

		.tabbar {
			position: fixed;
			left: 0;
			bottom: 0;
			display: flex;
			width: 100%;
			justify-content: space-between;
			align-items: center;
			background-color: #f60011;

			.tabbar-item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 33.333333%;
				color: #fff;
				padding: 20rpx 20rpx 15rpx;
				position: relative;
				text-align: center;

				.icon {
					width: 60rpx;
					height: 60rpx;

					&.icon-ylt {
						width: 70rpx;
						height: 70rpx;
					}
				}

				text {
					font-size: 24rpx;
					line-height: 1.8;
				}

				&.tabbar-item-mid {
					margin-top: -130rpx;

					.icon {
						width: 180rpx;
						height: 180rpx;
					}
				}
			}
		}

		// 礼品列表
		.giftlist {
			display: flex;
			flex-direction: column;

			.gift-item {
				display: flex;
				flex-direction: column;
				padding: 20rpx;
				background-color: #ffffff;

				.title {
					display: flex;

					.title-icon {
						display: flex;
						background: url('/static/new/title_gift.png') no-repeat center;
						background-size: 100%;
						width: 40rpx;
						height: 40rpx;
					}

					.title-body {
						flex: 1;
						display: flex;
						flex-direction: column;
						margin-left: 20rpx;

						&.title-body-item {
							.name {
								font-size: 34rpx !important;
								margin-top: 10rpx;
								line-height: 1.8;
							}

							.subname {
								font-size: 24rpx;
								color: #777777;
								line-height: 1.6 !important;
							}
						}

						.name {
							font-size: 36rpx;
							font-size: bold;
							font-weight: bold;
							color: #353434;
						}

						.subname {
							font-size: 22rpx;
							color: #777777;
							line-height: 2;
						}
					}
				}

				.content {
					display: flex;
					flex-direction: row;
					margin-top: 20rpx;

					.img {
						display: flex;
						width: 100%;
						height: 450rpx;
						border-radius: 10rpx;
					}

					.content-body {
						display: flex;
						width: 100%;
						flex-direction: column;
						padding-left: 15rpx;
						padding-right: 15rpx;

						.btn {
							display: flex;
							width: 120rpx;
							height: 120rpx;
							margin: 0 auto;
						}

						.zl-list {
							display: flex;
							flex-direction: column;

							.zl-list-tt {
								display: flex;
								justify-content: space-between;
								line-height: 2;
								border-bottom: 1px solid #ddd;
								font-size: 22rpx;
							}

							.friendlist {
								display: flex;
								flex-direction: column;

								.friendlist-item {
									display: flex;
									align-items: center;
									justify-content: space-between;
									padding-bottom: 10rpx;
									font-size: 26rpx;

									.img {
										border-radius: 70rpx;
										width: 70rpx;
										height: 70rpx;
									}

									.name {
										padding: 0 10rpx;
									}

									.tel {
										float: right;
									}
								}
							}
						}
					}
				}

				.jindu {
					display: flex;
					justify-content: space-between;
					margin-top: 50rpx;

					.tip {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 120rpx;
						height: 50rpx;
						background-color: $uni-newcolor-primary;
						color: #ffffff;
						font-size: 24rpx;
						padding: 0 15rpx;
						border-radius: 100rpx;
						margin-left: 10rpx;
					}

					.status {
						margin-left: 10rpx;
						button{
							display: flex;
							align-items: center;
							justify-content: center;
							width: 120rpx;
							height: 45rpx;
							color: #ffffff;
							font-size: 20rpx;
							padding: 0 15rpx;
							border-radius: 100rpx;
							margin-top: 3rpx;
						}
					}

					.jindu-body {
						flex: 1;
						display: flex;
						height: 40rpx;
						align-items: center;
						position: relative;
						top: 8rpx;

						.jd1 {
							position: absolute;
							left: 0;
							top: 0;
							display: block;
							width: 100%;
							height: 40rpx;
							box-shadow: 0 0 5px 3px rgba(204, 18, 9, 0.5) inset;
							border-radius: 40rpx;
							overflow: hidden;

							.baifenbi {
								position: relative;
								left: 0;
								top: 0;
								display: block;
								width: auto;
								height: 40rpx;
								background: url('/static/new/jindu_line_hover.png') repeat-x center;
								background-size: auto 100%;
							}
						}

						.jd2 {
							position: absolute;
							left: 0;
							top: 0;
							display: block;
							width: 100%;
							height: 40rpx;
							border-radius: 40rpx;
							box-shadow: 0 0 3px 1px rgba(204, 18, 9, 0.3);

							.pos {
								position: relative;
								left: 0;
								top: -10rpx;
								width: 60rpx;
								height: 60rpx;
							}

							.val {
								position: relative;
								left: 0;
								top: -110rpx;
								font-size: 34rpx;
								font-weight: bold;
								color: #d92617;
							}
						}

					}
				}

			}
		}

		.djs {
			display: flex;
			margin: auto;
			width: 45%;
			height: 90rpx;
		}

		// 助力btn
		.zhulibtn {
			width: 180rpx;
			height: 180rpx;
			margin-top: 30rpx;
		}

		.endtxt {
			font-size: 30rpx;
			color: #353434;
			margin-top: 30rpx;
		}

		//标题
		.modtitle {
			padding: 0 20rpx;
			background-color: #fff;
			height: 90rpx;
			line-height: 90rpx;
			border-bottom: 1px solid #f2f2f2;

			&.mar-t {
				margin-top: 40rpx;
			}

			.name {
				border-left: 8rpx solid #f60011;
				padding-left: 20rpx;
				font-size: 36rpx;
				font-weight: bold;
				color: #353434;
			}
		}

		// 返回首页
		.backhome {
			position: fixed;
			left: 30rpx;
			top: 70rpx;
			display: flex;
			width: 70rpx;
			height: 70rpx;
			justify-content: center;
			align-items: center;
			background-color: rgba(0, 0, 0, 0.5);
			border-radius: 70rpx;

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}

	}

	// 无缝滚动	
	.scroll_lists {
		height: 400rpx;
		overflow: hidden;
		width: 100%;

		.scroll_top {
			transition: all 1s;
			margin-top: -80rpx;
		}

		.scroll_list {
			display: flex;
			justify-content: space-between;
			height: 80rpx;
			line-height: 880rpx;
			display: flex;
			align-items: center;
			font-size: 26rpx;

			.touxiang {
				border-radius: 65rpx;
				width: 65rpx;
				height: 65rpx;
			}

			.name {
				display: block;
				padding: 0 10rpx;
				width: auto;
				max-width: 40%;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}

	// 紫色按钮
	.zisebtn {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 190rpx;
		height: 190rpx;
		border-radius: 220rpx;
		border: 7rpx solid #fff;
		background: linear-gradient(to bottom, #ae66ff, #6733fb);
		font-size: 35rpx;
		color: #ffffff;
		font-weight: 700;
		margin: 15rpx auto;
	}
</style>